<template>
  <container>
    <!-- 类似于img标签 -->
    <sprite :texture='mapImg' :y='mapY1'></sprite>
    <sprite :texture='mapImg' :y='mapY2'></sprite>
  </container>
</template>

<script>
import mapImg from '@/assets/map.jpg'
import { ref, onMounted, onUnmounted } from 'vue'
import { game } from '@/game/index.js'

export default {
  setup() {
    const stageHeight = 1080
    const mapY1 = ref(0)
    const mapY2 = ref(-stageHeight)

    // 图片滚动
    // mvvm 数据驱动视图
    const speed = 10
    const update = () => {
      mapY1.value += speed
      mapY2.value += speed

      if (mapY1.value >= stageHeight) {
        mapY1.value = -stageHeight
      }
      if (mapY2.value >= stageHeight) {
        mapY2.value = -stageHeight
      }
    }

    onMounted(() => {
      game.ticker.add(update)
    })

    onUnmounted(() => {
      game.ticker.remove(update)
    })
    // game.ticker.add(() => {
    //   // console.log('ticker')
    //   mapY1.value += speed
    //   mapY2.value += speed

    //   if (mapY1.value >= stageHeight) {
    //     mapY1.value = -stageHeight
    //   }
    //   if (mapY2.value >= stageHeight) {
    //     mapY2.value = -stageHeight
    //   }
    // })
    return {
      mapImg,
      mapY1,
      mapY2
    }
  }
}
</script>
